<template>
	<view>
		<header-common title="注册"></header-common>

		<view class="logo-img">

		</view>

		<view class="form-ipt">
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="手机号" labelWidth="120rpx" prop="userInfo.phone" borderBottom>
					<uv-input v-model="model1.userInfo.phone" type="number" placeholder="手机号" border="bottom">
					</uv-input>
				</uv-form-item>

				<uv-form-item label="登录密码" labelWidth="120rpx" prop="userInfo.password" borderBottom>
					<uv-input v-model="model1.userInfo.password" type="password" placeholder="密码" border="bottom">
					</uv-input>
				</uv-form-item><uv-form-item label="确认密码" labelWidth="120rpx" prop="userInfo.psd2" borderBottom>
					<uv-input v-model="model1.userInfo.psd2" type="password" placeholder="密码" border="bottom">
					</uv-input>
				</uv-form-item>

				<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
				<!-- <uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button> -->
			</uv-form>
		</view>


	</view>
</template>

<script>
	import {
		register
	} from "@/api/axios.js"
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						phone: '',
						password: '',
						psd2: '',
					},
				},
				// 验证规则
				rules: {
					'userInfo.phone': [{
							type: 'number',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '手机号格式错误'
						},
					],
					'userInfo.password': {
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur'],
					},
					'userInfo.psd2': [{
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur'],
					},{
						// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
						validator: (rule, value, callback) => {
							// 此处业务逻辑省略
							// 返回true表校验通过，返回false表示不通过
							if(value == this.model1.userInfo.password){
								return true;
							} else {
								return false;
							}
							
						},
						message: '密码不相同',
						trigger: ['blur','change']
					}
					]

				},
			}
		},
		methods: {
			// 提交
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})

					/*
					// 发送请求, 验证密码 跳转页面
					let res = await register(userInfo);
					// 
					 
					// 返回
					uni.navigateBack(1) 
					*/

				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败,重新输入'
					})
				})
			},


		}
	}
</script>

<style scoped>
	.form-ipt {
		width: 80%;
		margin: auto;
	}

	.logo-img {
		height: 300rpx;
	}
</style>